<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>14.简单的饼图</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <script>
  /*
    难题：制作饼图

    一、基于 transform 的解决方案

      1. 左右各指定一种颜色，用伪元素覆盖上去，通过旋转来决定露出多大的扇区
        使用 background-color:  inherit 声明可以避免代码的重复
        调整  transform-origin 绕着圆形的圆心来旋转
        每次旋转到半圈后，右半边要改变背景颜色，意味着比例超过一半（通过变量 currentColor 来改变）

        .div1 {
          background-image: linear-gradient(to right, transparent 50%, currentColor 0);
          color: #655;
        }

        .div1:before {
          border-radius: 0 100% 100% 0 / 50%;
          background-color: inherit;
          transform-origin: left;
          animation: spin 3s linear infinite, bg 6s step-end infinite;
        }

      2. 得到任意度数饼图：沿用上面作用，采用暂停机制
        用负的动画延时来直接跳至动画中的任意时间点，并且定格在那里：在饼图上显出的比率就是我们的 animation-delay 值在总的动画持续时间中所占的比率
      
        例如，如果动画持续时间定为 6s，我们只需要把 animation-delay 设置为 -1.2s，就能显示出 20% 的比率
        最后一个问题：动画是作用在伪元素上的，但我们希望最终内联样式可以设置在 .div2 元素上。
        不过，由于 <div> 上并没有任何动画效果，可以用内联样式的方式为其设置 animation-delay 属性，然后再在伪元素上应用 animation-delay: inherit; 属性
        
        .pie {
          background: yellowgreen;
          background-image: linear-gradient(to right, transparent 50%, #655 0);
        }

        .pie:before {
          background-color: inherit;
          transform-origin: left;
          animation: spin 50s linear infinite, bg 100s step-end infinite;
          animation-play-state: paused;
          animation-delay: inherit;
        }

      3. 也可以使用 js 动态绑定到伪类上

        document.querySelectorAll('.pie').forEach(function(pie) {
          var p = parseFloat(pie.textContent);
          pie.style.animationDelay = '-' + p + 's';
        });
    
    二、SVG 解决方案

      1. 根据传输的百分比动态生成 svg

        var NS = "http://www.w3.org/2000/svg";
        var svg = document.createElementNS(NS, "svg");
        var circle = document.createElementNS(NS, "circle");
        var title = document.createElementNS(NS, "title");
        
        circle.setAttribute("stroke-dasharray", p + " 100");
      
    三、conic-gradient 圆锥渐变

      1. 多色

        background: conic-gradient(deeppink 30%, yellowgreen 0, yellowgreen 70%, teal 0);
      
      2. 配合 background-size 使用

        background: conic-gradient(#000 12.5%, #fff 0, #fff 37.5%,
          #000 0, #000 62.5%, #fff 0, #fff 87.5%, #000 0);
        background-size: 50px 50px;
    
      3. repaeting-conic-gradient：和之前的类似，重复片段直到结束

        background: repeating-conic-gradient(deeppink 0, deeppink 15deg, yellowgreen 0, yellowgreen 30deg);

      4. 项目中应用：仪表盘等

        参照：https://www.cnblogs.com/coco1s/p/7079529.html

  */
  </script>

  <style>
    .div1 {
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: yellowgreen;
      background-image: linear-gradient(to right, transparent 50%, currentColor 0);
      color: #655;
    }

    .div1:before {
      content: '';
      display: block;
      height: 100%;
      margin-left: 50%;
      border-radius: 0 100% 100% 0 / 50%;
      background-color: inherit;
      transform-origin: left;
      animation: spin 3s linear infinite, bg 6s step-end infinite; /* 没转半圈右边部分要换背景颜色 */
    }

    .pie {
      position: relative;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: yellowgreen;
      background-image: linear-gradient(to right, transparent 50%, #655 0);
      color: transparent;
    }

    .pie:before {
      content: '';
      position: absolute;
      top: 0; left: 50%;
      width: 50%; height: 100%;
      border-radius: 0 100% 100% 0 / 50%;
      background-color: inherit;
      transform-origin: left;
      animation: spin 50s linear infinite, bg2 100s step-end infinite;
      animation-play-state: paused;
      animation-delay: inherit;
    }

    .pie2 {
      width: 100px;
      height: 100px;
      display: inline-block;
      margin: 10px;
      transform: rotate(-90deg);
    }

    svg {
      background: yellowgreen;
      border-radius: 50%;
    }

    circle {
      fill: yellowgreen;
      stroke: #655;
      stroke-width: 32;
    }

    .pie2.animated circle {
      animation: grow 2s infinite linear;
    }

    .conic {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: yellowgreen;
      background: conic-gradient(deeppink 30%, yellowgreen 0, yellowgreen 70%, teal 0);
    }

    .conic2 {
      width: 150px;
      height: 150px;
      background: conic-gradient(#000 12.5%, #fff 0, #fff 37.5%,
        #000 0, #000 62.5%, #fff 0, #fff 87.5%, #000 0);
      background-size: 50px 50px;
    }

    .conic3 {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: repeating-conic-gradient(deeppink 0, deeppink 15deg, yellowgreen 0, yellowgreen 30deg);
    }

    @keyframes spin {
      to {
        transform: rotate(.5turn);
      }
    }

    @keyframes bg {
      50% {
        background: currentColor;
      }
    }

    @keyframes bg2 {
      50% { background: #655; }
    }

    @keyframes grow {
      to {
        stroke-dasharray: 100 100
      }
    }
  
  </style>
</head>
<body>
  <p>饼图伪类旋转原理：</p>
  <img src="../images/5.饼图伪类旋转原理.jpg" alt="饼图伪类旋转原理" width="220" height="600">
  <br /><br />
  <div class="div1">饼图动画</div>
  <br /><br />
  <div class="pie" style="animation-delay: -20s">通过内敛属性设置百分比</div>
  <br />
  <div class="pie js">25%</div>
  <br />
  <div class="pie js">80%</div>
  <br />
  <div class="pie2">5%</div>
  <div class="pie2">53%</div>
  <div class="pie2 animated">0%</div>
  <br /><br />
  <div class="conic">多色</div>
  <br />
  <div class="conic2">background-size</div>
  <br />
  <div class="conic3">repaeting-conic-gradient</div>
  <br />

  <script src="./js/util.js"></script>
  <script>
    $$('.js').forEach(function(pie) {
      var percentage = parseFloat(pie.textContent);
      pie.style.animationDelay = '-' + percentage + 's';
    });

    $$('.pie2').forEach(function(pie) {
      var p = parseFloat(pie.textContent);
      var NS = "http://www.w3.org/2000/svg";
      var svg = document.createElementNS(NS, "svg");
      var circle = document.createElementNS(NS, "circle");
      var title = document.createElementNS(NS, "title");
      
      circle.setAttribute("r", 16);
      circle.setAttribute("cx", 16);
      circle.setAttribute("cy", 16);
      circle.setAttribute("stroke-dasharray", p + " 100");
      
      svg.setAttribute("viewBox", "0 0 32 32");
      title.textContent = pie.textContent;
      pie.textContent = '';
      svg.appendChild(title);
      svg.appendChild(circle);
      pie.appendChild(svg);
    });
  </script>
</body>
</html>